<script setup>
import { ref } from 'vue'
import { addExperService, getExperOneService,delExperService } from '@/api/report'
import { Delete } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores'
const userStore = useUserStore()

// 表头
const tableHeader = ref([
    {
        title: '实验名称',
        prop: 'symc',
        align: 'left',
        width: '110'
    },
    {
        title: '实验目的',
        prop: 'symd',
        align: 'left',
        width: '160'
    },
    {
        title: '开始时间',
        prop: 'ksrq',
        align: 'left',
        width: '110'
    },
    {
        title: '截止时间',
        prop: 'jzrq',
        align: 'left',
        width: '110'
    },
    {
        title: '备注',
        prop: 'bz',
        align: 'left',
        width: 'auto'
    }
])

const formData = ref({
    kc: '',
    symc: '',
    symd: '',
    ksrq: '',
    jzrq: '',
    bz: '',
    uid: ''
})

const tableData = ref([])
const subTable = ref()
const delInfo = ref({})

const chushiHua = () => {
    formData.value.kc = userStore.userInfo.job
    formData.value.uid = userStore.userInfo.id
}

// 新增实验项目
const addExper = async () => {
    chushiHua()
    const { data } = await addExperService(formData.value)
    if (data.status !== 0) return ElMessage.error('发布失败')
    ElMessage.success('发布成功')
    formData.value = {}
    chushiHua()
}

// 获取实验项目
const getExper = async () => {
    const { data } = await getExperOneService()
    tableData.value = data.data
}

// 删除实验项目
const delExper = async() => {
    const {data} = await delExperService(delInfo.value)
    console.log(data);
    if (data.status !== 0) return ElMessage.error('删除失败')
    ElMessage.success('删除成功')
    delInfo.value = {}
    getExper()

}

const btnHandle = (item) => {
    if (item === 'add') {
        addExper()
        getExper()
    } else {
        formData.value = {}
        chushiHua()
    }
}

const delBtn = (row) => {
    delInfo.value = row
    ElMessageBox.confirm('你确定要删除这条数据吗?', '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            delExper()
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消修改',
            })
        })
}

// 表格点击
const stuHandleClick = (row) => {
    subTable.value.toggleRowSelection(row)
}

// 点击多个选择框，只显示最后一次选中的选择框
const stuHandleSelectionChange = (row) => {
    if (row.length > 1) {
        subTable.value.clearSelection()
        subTable.value.toggleRowSelection(row.pop())
    }
}
chushiHua()
getExper()
</script>

<template>
    <div class="content">
        <div class="left">
            <el-form style="width: 360px;" :label-position="right" label-width="auto">
                <el-form-item style="width: 300px;" label="课程">
                    <el-input v-model="formData.kc" disabled></el-input>
                </el-form-item>
                <el-form-item style="width: 300px;" label="实验名称">
                    <el-input v-model="formData.symc"></el-input>
                </el-form-item>
                <el-form-item label="实验目的">
                    <el-input v-model="formData.symd" type="textarea"></el-input>
                </el-form-item>
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="开始日期">
                            <el-input v-model="formData.ksrq"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2"></el-col>
                    <el-col :span="11">
                        <el-form-item label="截止日期">
                            <el-input v-model="formData.jzrq"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="备注">
                    <el-input v-model="formData.bz" type="textarea"></el-input>
                </el-form-item>
                <el-form-item>
                    <div class="btn-box">
                        <el-button @click="btnHandle('add')" type="primary">发布</el-button>
                        <el-button @click="btnHandle('cz')">重置</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <div class="right">
            <el-table :data="tableData" height="500" style="width: 52vw;" border ref="subTable"
                @row-click="stuHandleClick" highlight-current-row @selection-change="stuHandleSelectionChange"
                show-overflow-tooltip>
                <el-table-column type="selection" width="60"></el-table-column>
                <el-table-column v-for="item in tableHeader" :label="item.title" :prop="item.prop" :align="item.align"
                    :width="item.width"></el-table-column>
                <el-table-column width="60" label="操作">
                    <template #default="{ row }">
                        <el-button plain type="danger" :icon="Delete" circle @click="delBtn(row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<style scoped>
.content {
    display: flex;
    justify-content: space-around;
}

.left,
.right {
    margin: 20px;
}

.btn-box {
    margin: 0 auto;
}

::v-deep .el-table__header .cell {
    text-align: center;
}
</style>